<style lang="less" scoped>
.index-bg{
  img{
    width:100%;
  }
}
.index-list{
  height:1.44rem;
  background:#fff;
  margin:0 0 0.4rem;
  padding:0.3rem;
  .icon{
    height:1.44rem;
    line-height:1.44rem;
    width:1.44rem;
    border-radius:50%;
    color:#fff;
    text-align:center;
    margin:0 0.2rem 0 0.1rem;
    .iconfont{
      font-size:0.48rem;
    }
    &.orange{
      background:#f6a355;
    }
    &.green{
      background:#77babd;
    }
    &.blue{
      background:#6478ae;
    }
  }
  .ctx{
    line-height:1;
    dt{
      padding:0.32rem 0 0.22rem;
    }
    dd{
      color:#888888;
      font-size:14px;
    }
  }
  .icon-right{
    line-height:1.44rem;
    color:#959595;
  }
}
</style>
<template>
<div class="contain">
  <div class="index-bg"><img src="~images/bg/index.jpg"></div>
  <div class="index-list displayflex" @click="onlineOrder" 
   v-if="userinfo.UserBizType=='Cargowner' || userinfo.UserBizType=='warehouse'">
    <div class="icon orange"><i class="iconfont icon-pre-order"></i></div>
    <dl class="ctx flex1">
      <dt>在线下单</dt>
      <dd>轻松下单，全程配送跟踪</dd>
    </dl>
    <i class="iconfont icon-right"></i>
  </div>
  <div class="index-list displayflex" @click="sign">
    <div class="icon green"><i class="iconfont icon-Sign"></i></div>
    <dl class="ctx flex1">
      <dt>订单签收</dt>
      <dd>物流专线为您提供一站式服务</dd>
    </dl>
    <i class="iconfont icon-right"></i>
  </div>
  <div class="index-list displayflex" @click="goList">
    <div class="icon blue"><i class="iconfont icon-order-tracking"></i></div>
    <dl class="ctx flex1">
      <dt>订单跟踪</dt>
      <dd>实时掌握最新配送情况</dd>
    </dl>
    <i class="iconfont icon-right"></i>
  </div>
  <foot-box :status="1"></foot-box>
</div>
</template>

<script>
import footBox from '@/components/share/footerbox.vue';
export default{
  name:'index',
  components:{
    footBox
  },
  created() {
    sessionStorage.clear();
  },
  computed:{
    userinfo(){
      if(localStorage.UserInfo){
        return JSON.parse(localStorage.UserInfo)
      };
    },
  },
  methods:{
    onlineOrder(){
      this.$router.push({
        path:'/onlineOrder'
      })
    },
    sign(){
      var self = this;
      self.jWeixin.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function(res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              var model = JSON.parse(result); //二维码的JSON序列{r:id}
              if (model.r != '') {
                  self.$router.push({
                      path: '/sign',
                      query: {id:model.r}
                  });
              } else {
                self.$vux.toast.show({
                  type: 'warn', //success, warn, cancel, text
                  text: "扫描的内容无法识别，请重新扫描"
                });
              }
          },
          error: function(res) {
            self.$vux.toast.show({
              type: 'warn', //success, warn, cancel, text
              text: res.resultStr,
            });
          }
      });
    },
    goList(){
      this.$router.push({
        path:'/orderList',
        query:{
          type:'4'
        }
      })
    }
  },
  // beforeRouteLeave(to, from, next) {
  //   // console.log(to,from)
  //   // console.log('likai')
  //   // this.$router.push({
  //   //   path:'/index'
  //   // })
  //   // next(false);
  // }
}
</script>